@charset "utf-8";
@import "common/reset";
body {
    header {
        width: 100%;
        .head_top {
            width: 100%;
            background-color: #212121;
            .head_top_header {
                width: 1000px;
                margin: 0 auto;
                height: 40px;
                i {
                    padding-right: 13px;
                    line-height: 40px;
                    color: #bbbbbb;
                    font-size: 20px;
                }
                span {
                    font-size: 12px;
                    color: #bbbbbb;
                    line-height: 40px;
                }
            }
        }
        .head_logo_nav {
            width: 100%;
            .head_logo_nav_fuck {
                width: 1000px;
                margin: 0 auto;
                .head_logo {
                    width: 153px;
                    height: 117px;
                    margin: 5px 103px 0px 93px;
                }
                .head_nav {
                    width: 847px;
                    margin: -38px 0px 0 256px;
                    span {
                        font-size: 14px;
                        margin-left: 60px;
                    }
                    span:nth-of-type(1) {
                        margin-left: 0px;
                    }
                    span:nth-of-type(3) {
                        margin-left: 56px;
                    }
                    span:nth-of-type(4) {
                        margin-left: 61px;
                    }
                }
            }
        }
    }
    KV {
        width: 1366px;
        height: 474px;
        overflow: hidden;
        position: relative;
        @keyframes lian {
            0%,
            25% {
                margin-left: 0px;
            }
            35%,
            60% {
                margin-left: -1366px;
            }
            70%,
            100% {
                margin-left: -2732px;
            }
        }
        .lidelayone {
            width: 100%;
            height: 100%;
        }
        .lidelay {
            //  animation-delay: 1s;
            position: absolute;
            left: 1366px;
            top: -460px;
        }
        .lidelaytwo {
            //  animation-delay: 6s;
            position: absolute;
            left: 2732px;
            top: -460px;
        }
    }
    footer {
        .footer_all {
            margin: 0 auto;
            width: 1000px;
            height: 286px;
            background-color: #000000;
            .footer_top {
                width: 100%;
                transform: translateX();
                font-size: 12px;
                color: #d2d2d2;
                dl {
                    width: 18%;
                    white-space: nowrap;
                    overflow: hidden;
                    margin: 41px 0 0 111px;
                    a {
                        dt {
                            font-size: 14px;
                            position: relative;
                            color: #d2d2d2;
                            margin-bottom: 11px;
                        } 
                        dt::after {
                            content: "";
                            width: 200px;
                            border-bottom: 1px solid #dbdbea;
                            position: absolute;
                            left: 0;
                            top: 22px;
                        }
                        dd {
                            color: #d2d2d2;
                            margin-bottom: 18px;
                        }
                    }
                }
            }
            .footer_last{
                margin-left: 88px;
                span{
                    color: #D2D2D2;
                    font-size: 14px;
                    margin-right: 42px;
                    
                }
            }
        }
    }
}

.li {
    animation-name: lian;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(1, 1, 0, 0);
    animation-direction: alternate;
    animation-fill-mode: forwards;
}
.trans{
        transition: All 0.4s ease-in-out;
            -webkit-transition: All 0.4s ease-in-out;
            -moz-transition: All 0.4s ease-in-out;
            -o-transition: All 0.4s ease-in-out;
            &:hover {
                transform: scale(1.1);
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -o-transform: scale(1.1);
                -ms-transform: scale(1.1);
    }}
    .lian{
        position: relative;
    }
    .lian::after{
                content: "";
                width: 0;
                height: 1px;
                background-color: black;
                position: absolute;
                bottom: 0px;
                left: 50%;
                transform: translateX(-50%);
                transition:all .8s cubic-bezier(0,1.83,1,1.83);
            }
            .lian:hover:after{
                width: 50px;
                cursor: crosshair;
            }
